<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改项目基础信息')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" enctype="multipart/form-data" id="form-projectBase-edit"
          th:object="${cmsProjectBase}">
        <h4 class="form-header h4">项目基础信息信息</h4>
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">项目名称：</label>
            <div class="col-sm-8">
                <input name="projectName" th:field="*{projectName}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">项目经理：</label>
            <div class="col-sm-8">
                <input name="projectManager" th:field="*{projectManager}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">项目地点：</label>
            <div class="col-sm-8">
                <input name="projectLocation" th:field="*{projectLocation}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">项目金额：</label>
            <div class="col-sm-8">
                <input name="projectAmount" th:field="*{projectAmount}" class="form-control" type="text"
                       data-rule-number="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">项目类型：</label>
            <div class="col-sm-8">
                <!--<input name="projectTypeId" th:field="*{projectTypeId}" class="form-control" type="text">-->
                <select name="projectTypeId" class="form-control">
                    <option value="">--请选择--</option>
                    <option th:each="item:${typeList}"
                            th:value="${item.id}" th:text="${item.typeName}"
                            th:selected="*{projectTypeId}==${item.id}">
                    </option>
                </select>
            </div>
        </div>
        <h4 class="form-header h4">活动信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addRow();refreshImgData();"><i class="fa fa-plus"> 增加</i>
                </button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow();refreshImgData();"><i class="fa fa-minus">
                    删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/system/projectBase/projectBaseHandle.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "system/projectBase";

    $("#form-projectBase-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var formData = new FormData(); //$('#form-projectBase-edit')[0]
            $('#form-projectBase-edit').serializeArray().forEach(function(item) {
                formData.append(item.name, item.value);
            });
            var rows = $('#bootstrap-table').bootstrapTable('getData');
            rows.forEach((row, index) => {
                if (row.coverFile) {
                    formData.append('cmsActivityList['+ index + '].coverFile', row.coverFile);
                }
                if (row.activityPictureFiles && row.activityPictureFiles.length > 0) {
                    row.activityPictureFiles.forEach(file => {
                        formData.append('cmsActivityList['+ index + '].activityPictureFiles', file);
                    });
                }
            });

            $.operate.save(prefix + "/edit", formData, null, {
                contentType: false, // 不设置Content-Type头
                processData: false, // 不处理数据
            });
        }
    }

    $(function () {
        var options = {
            data: [[${cmsProjectBase.cmsActivityList}]],
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: '',
                    width: 1,
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex;
                    }
                },
                {
                    field: 'id',
                    align: 'center',
                    title: '',
                    width: 1,
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].id' value='%s' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'activityName',
                    align: 'center',
                    title: '活动名称',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].activityName' value='%s' required>", index, value);
                        return html;
                    }
                },

                {
                    field: 'cover',
                    align: 'center',
                    title: '活动封面',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].cover' value='%s'>", index, value);
                        var img = $.common.sprintf("<img id='cmsActivityList[%s].coverImg' src='%s' style='display:%s' onclick=\"clickInputFile(%s, 'coverFile')\" width='100' height='100'>",
                                index, value, value == '' ? 'none' : 'block', index)
                            // + $.common.sprintf("<a href='javascript:void(%s)' style='display:%s'><label for='cmsActivityList[%s].coverFile'>上传封面</label></a>", index, value == '' ? 'block' : 'none', index)
                            + $.common.sprintf("<input type='file' name='cmsActivityList[%s].coverFile' onchange=\"changePicture(%s, 'coverFile', 'coverImg')\" style='display:%s'>",
                                index, index, value == '' ? 'block' : 'none');
                        return html + img;
                    }
                },

                {
                    field: 'activitySummary',
                    align: 'center',
                    title: '活动小结',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].activitySummary' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'activityPictures',
                    align: 'center',
                    title: '活动照片',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].activityPictures' value='%s'>", index, value);
                        var topPic = value.split('|')[0];
                        var img = $.common.sprintf("<img id='cmsActivityList[%s].topPicture' src='%s' style='display:%s' onclick=\"clickInputFile(%s, 'activityPictureFiles')\" width='100' height='100'>",
                                index, topPic, topPic == '' ? 'none' : 'block', index)
                            + $.common.sprintf("<input type='file' name='cmsActivityList[%s].activityPictureFiles' onchange=\"changePicture(%s, 'activityPictureFiles', 'topPicture')\" style='display:%s' multiple >",
                                index, index, topPic == '' ? 'block' : 'none');
                        return html + img;
                    }
                },

                {
                    field: 'newsRelease',
                    align: 'center',
                    title: '新闻稿',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].newsRelease' value='%s'>", index, value);
                        return html;
                    }
                },

                /*{
                    field: 'createTime',
                    align: 'center',
                    title: '',
                    width: 1,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].createTime' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'createBy',
                    align: 'center',
                    title: '',
                    width: 1,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].createBy' value='%s'>", index, value);
                        return html;
                    }
                },*/

                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\');refreshImgData();"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
        };
        $.table.init(options);
    });

    function addRow() {
        var count = $("#" + table.options.id).bootstrapTable('getData').length;
        var row = {
            index: $.table.serialNumber(count),
            activityName: "",
            cover: "",
            activitySummary: "",
            activityPictures: "",
            newsRelease: "",
            createTime: "",
            createBy: "",
        }
        sub.addRow(row);
    }
</script>
</body>
</html>
